import React from 'react';
import { Modal, Descriptions, Tag, Typography, Space, Card, Statistic, Row, Col } from 'antd';
import { BellOutlined, UserOutlined, ClockCircleOutlined, SendOutlined } from '@ant-design/icons';
import moment from 'moment';

const { Text, Title } = Typography;

interface NotificationPreviewProps {
  visible: boolean;
  notification?: SYSTEM.NotificationModel;
  onCancel: () => void;
}

const NotificationPreview: React.FC<NotificationPreviewProps> = ({ visible, notification, onCancel }) => {
  if (!notification) return null;

  // 通知类型标签颜色映射
  const typeColorMap = {
    system: 'blue',
    announcement: 'green',
    maintenance: 'orange',
    promotion: 'purple',
  };

  // 状态标签颜色映射
  const statusColorMap = {
    draft: 'orange',
    sent: 'green',
    scheduled: 'blue',
  };

  // 目标类型标签颜色映射
  const targetTypeColorMap = {
    all: 'cyan',
    role: 'geekblue',
    user: 'magenta',
  };

  // 类型映射
  const typeMap = {
    system: '系统通知',
    announcement: '公告通知',
    maintenance: '维护通知',
    promotion: '推广通知',
  };

  // 状态映射
  const statusMap = {
    draft: '草稿',
    sent: '已发送',
    scheduled: '已排期',
  };

  // 目标类型映射
  const targetTypeMap = {
    all: '全部用户',
    role: '指定角色',
    user: '指定用户',
  };

  return (
    <Modal
      title={
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <BellOutlined style={{ fontSize: 20 }} />
          <div>
            <div>通知预览</div>
            <div style={{ fontSize: '12px', color: '#666' }}>{notification.title}</div>
          </div>
        </div>
      }
      open={visible}
      onCancel={onCancel}
      footer={null}
      width={800}
      destroyOnClose
    >
      <div style={{ marginBottom: 24 }}>
        {/* 通知基本信息 */}
        <Card style={{ marginBottom: 16 }}>
          <Title level={4} style={{ margin: '0 0 16px 0' }}>
            {notification.title}
          </Title>
          <div style={{ marginBottom: 16 }}>
            <Space>
              <Tag color={typeColorMap[notification.type]}>
                {typeMap[notification.type]}
              </Tag>
              <Tag color={statusColorMap[notification.status]}>
                {statusMap[notification.status]}
              </Tag>
              <Tag color={targetTypeColorMap[notification.target_type]}>
                {targetTypeMap[notification.target_type]}
              </Tag>
            </Space>
          </div>
          <div style={{ 
            padding: 16, 
            background: '#f9f9f9', 
            borderRadius: 8,
            lineHeight: '1.6'
          }}>
            {notification.content}
          </div>
        </Card>

        {/* 发送统计 */}
        {notification.status !== 'draft' && (
          <Row gutter={16} style={{ marginBottom: 16 }}>
            <Col span={6}>
              <Card>
                <Statistic
                  title="总接收人数"
                  value={notification.total_recipients}
                  prefix={<UserOutlined />}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="已读人数"
                  value={notification.read_count}
                  prefix={<BellOutlined />}
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="阅读率"
                  value={notification.total_recipients > 0 
                    ? Math.round((notification.read_count / notification.total_recipients) * 100) 
                    : 0}
                  suffix="%"
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="未读人数"
                  value={notification.total_recipients - notification.read_count}
                  valueStyle={{ color: '#cf1322' }}
                />
              </Card>
            </Col>
          </Row>
        )}

        {/* 详细信息 */}
        <Descriptions title="详细信息" column={2} bordered>
          <Descriptions.Item label="通知ID">{notification.id}</Descriptions.Item>
          <Descriptions.Item label="通知标题">{notification.title}</Descriptions.Item>
          <Descriptions.Item label="通知类型">
            <Tag color={typeColorMap[notification.type]}>
              {typeMap[notification.type]}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={statusColorMap[notification.status]}>
              {statusMap[notification.status]}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="目标用户">
            <Tag color={targetTypeColorMap[notification.target_type]}>
              {targetTypeMap[notification.target_type]}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="目标值">
            {notification.target_value || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="排期时间">
            {notification.scheduled_time 
              ? moment(notification.scheduled_time).format('YYYY-MM-DD HH:mm:ss')
              : '-'
            }
          </Descriptions.Item>
          <Descriptions.Item label="发送时间">
            {notification.sent_time 
              ? moment(notification.sent_time).format('YYYY-MM-DD HH:mm:ss')
              : '-'
            }
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">
            {moment(notification.created_at).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="更新时间">
            {moment(notification.updated_at).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="通知内容" span={2}>
            <div style={{ 
              maxHeight: 200, 
              overflow: 'auto',
              padding: 12,
              background: '#f5f5f5',
              borderRadius: 4,
              whiteSpace: 'pre-wrap'
            }}>
              {notification.content}
            </div>
          </Descriptions.Item>
        </Descriptions>

        {/* 移动端预览 */}
        <Card title="移动端预览效果" style={{ marginTop: 16 }}>
          <div style={{ 
            width: 300, 
            margin: '0 auto',
            border: '1px solid #d9d9d9',
            borderRadius: 8,
            overflow: 'hidden'
          }}>
            {/* 手机顶部 */}
            <div style={{ 
              background: '#1890ff', 
              color: 'white', 
              padding: '8px 16px',
              fontSize: '14px',
              fontWeight: 'bold'
            }}>
              推普学习
            </div>
            
            {/* 通知内容 */}
            <div style={{ padding: 16, background: 'white' }}>
              <div style={{ 
                display: 'flex', 
                alignItems: 'center', 
                marginBottom: 12 
              }}>
                <div style={{ 
                  width: 32, 
                  height: 32, 
                  background: typeColorMap[notification.type],
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  marginRight: 12
                }}>
                  <BellOutlined style={{ color: 'white', fontSize: 16 }} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 'bold', fontSize: '14px' }}>
                    {notification.title}
                  </div>
                  <div style={{ fontSize: '12px', color: '#666' }}>
                    {notification.sent_time 
                      ? moment(notification.sent_time).format('MM-DD HH:mm')
                      : '刚刚'
                    }
                  </div>
                </div>
              </div>
              <div style={{ 
                fontSize: '13px', 
                lineHeight: '1.5',
                color: '#333'
              }}>
                {notification.content}
              </div>
            </div>
          </div>
        </Card>

        {/* 预览说明 */}
        <div style={{ 
          marginTop: 16, 
          padding: 12, 
          background: '#f6ffed', 
          border: '1px solid #b7eb8f',
          borderRadius: 6 
        }}>
          <h4 style={{ margin: '0 0 8px 0', color: '#52c41a' }}>预览说明</h4>
          <ul style={{ margin: 0, paddingLeft: 20, color: '#666' }}>
            <li>此预览展示通知在移动端的显示效果</li>
            <li>实际推送效果可能因设备和系统版本而略有差异</li>
            <li>通知的阅读统计会在用户查看后实时更新</li>
            <li>已发送的通知无法修改，请谨慎操作</li>
          </ul>
        </div>
      </div>
    </Modal>
  );
};

export default NotificationPreview;
